<template>
	<app-page>
		<wd-config-provider :theme="theme">
			<view class="container">
				<view class="tabs" :style="{'top': navHeight}">
					<wd-tabs lineWidth="60" lineHeight="2" custom-class="wd-tabs-custom-class" v-model="currentTab"
						@change="tabsChange">
						<block v-for="item in tabs" :key="item">
							<wd-tab :title="item">
								<!-- <view class="content">{{ item }}</view> -->
							</wd-tab>
						</block>
					</wd-tabs>
				</view>
				<view class="list">
					<queryItem :isPosts="false" v-for="(item,index) in dataList" :posts="item"></queryItem>
				</view>
			</view>
		</wd-config-provider>
	</app-page>

</template>

<script lang="ts">
	import { defineComponent, ref } from 'vue';

	import useRouter from '@/hooks/useRouter.ts';
	import useStatusHeight from '@/hooks/useStatusHeight';
	import usePosts from "./usePosts"
	import queryItem from "./../components/item"
	export default defineComponent({
		name: 'MyPosts',
		components: {
			queryItem
		},
		setup(props, ctx) {
			const router = useRouter();

			// 日间light、夜间dark主题
			const theme = ref('light');
			const statusHeight = useStatusHeight();
			const posts = usePosts();


			return {
				theme,
				// #ifndef MP-WEIXIN
				navHeight: statusHeight.navHeight,
				// #endif
				// #ifdef MP-WEIXIN
				navHeight: 0,
				// #endif
				...posts,
				// dataList,
			};
		}
	});
</script>
<!-- #ifdef MP-WEIXIN -->
<style lang="less">
	page {
		background-color: #f2f2f2;
	}
</style>
<!-- #endif -->
<style lang="less" scoped>
	page {
		background-color: #f2f2f2;
	}

	.container {
		position: relative;
		padding-top: 84rpx; // 设置tabs的高度，根据实际高度调整

		.tabs {
			position: fixed;
			width: 100%;
			height: 84rpx;
			top: 0;
			z-index: 2;

			:deep(.wd-tabs__nav) {
				height: 84rpx;
				line-height: 84rpx;

				.wd-tabs__nav-container {
					height: 84rpx;
					line-height: 84rpx;

					.wd-tabs__nav-item {
						height: 84rpx;
					}
				}
			}
		}

		.list {
			padding: 0 24rpx 24rpx;
		}
	}
</style>